import React, { useState, useEffect } from 'react';
import { Search, Toast, Grid, Tabs } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import { SETLIST, ALLSTATE,SETLISTACTIONTYPE } from '../../../tyeps/store.d'
import requset from '../../../utils/requset'
import { useDispatch, useSelector } from 'react-redux'
import '../../../api/indexMock'
import {useNavigate} from 'react-router-dom'



export default function Index() {
    const dispatch = useDispatch()
    const navigate = useNavigate()

    const [value, setValue] = useState('');

    const [gris, setgrid] = useState({})

    useEffect(() => {
        requset.get('/api/list').then(res => {
            console.log(res.data.list);
            dispatch({
                type: SETLIST,
                payload: res.data.list
            })
        })

    }, [])

    const listData = useSelector((state: ALLSTATE) => {
        return state.list
    })

    const handeClick=(params:SETLISTACTIONTYPE)=>{
        navigate('/home/car',{
            state:params
            
            
        })
        console.log(params);
    }


    return (
        <div>
            <header>
                <Search
                    shape="round"
                    background="#4fc08d"
                    value={value}
                    onChange={setValue}
                    placeholder="请输入搜索关键词"
                />

                <Grid columnNum={5}>
                    {listData.map((item, index) => (
                        <Grid.Item key={index} icon={<ShopO />} text={item.user} />
                    ))}
                </Grid>
            </header>


            <main>
                <div className="demo-tabs">
                    
                </div>
                <ul>
                   
                </ul>
                {
                    listData && listData.map((item, index) => {
                        return  <li key={index} onClick={()=>handeClick(item)}>
                            {item.user}
                            {item.title}
                            {item.city}
                            <img src={item.img} alt="" />
                            </li>
                    })
                }
            </main>
            <footer>
                111
            </footer>
        </div>
    )
}
